<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas-js圆盘抽奖10%的概率</title>
    <meta name="viewport" content="width=device-width"/>
    <style>
        body{
            margin: 0;
            padding: 0;
            outline: 0;
        }
        .wrap{
            width: 400px;
            height: 400px;
            margin: 50px auto;
        }
    </style>
</head>
<body>
<p>基本样式完成，但是还有很多缺陷：（1）完成一次抽奖后，在抽各种的结果上继续进行抽奖。没有实现</p>
<div class="wrap">
    <canvas id="canvas">
        <p>您的浏览器不支持canvas标签，需要<a href="http://www.baidu.com/s?wd=升级">升级</a>浏览器</p>
    </canvas>
</div>
<script type="text/javascript">
   //    全局变量
    var fillColor=['rgb(124, 187, 224)','rgb(4, 135, 210)'],
            fillText=['一等奖','二等奖','三等奖','四等奖','五等奖','六等奖','七等奖','八等奖','九等奖','十等奖'],
            c_x=200,
            c_y=200,
            c_r=200,
            //初始化，转盘没有运动
            isRunning=false,
            index= 0,//奖项数组下标
            step= 0,//旋转一个为1步
            speed=300,//旋转速度
            baseLap= 0, //快速旋转的圈数
            selected= 0,//旋转停止后选中的第几位
            isStop=true, //是否在运行中停止
            isRaffle=false,//是否进入了抽奖阶段
            timer=null;
    var wrap=document.querySelector('.wrap'),
            oWidth=wrap.clientWidth ,
            oHeight=wrap.clientHeight,
            canvas=document.getElementById('canvas');
    window.onload= function () {
       canvas.addEventListener("mousedown",startDraw,false);
        drawDisc();
    };
   function startDraw(e){
       var local=getPos(canvas, e.pageX, e.pageY);   //鼠标点击对象后，返回一个对象e,作为参数进行传递，有很多属性
       if(local.x>150&&local.x<250&&local.y>150&&local.y<250){
          //start开始抽奖
           if(!isStop){
               return 0;
           }
           init();
           timer=setInterval(rotate,speed);
       }
   }
   //开始抽奖
   function rotate(){
       if(step==4){ //慢速起步  4步之后开始加速
           clearTimer();
            timer=setInterval(rotate,speed-200)
       }
       if(baseLap>0&&index==10){  //运动完基本圈数后进行抽奖
           index=0;
           baseLap--;
           if(baseLap==0){ //开始抽奖
               clearTimer();
               timer = setInterval(rotate,speed);
               isRaffle = true;
           }
       }
       if(isRaffle&&selected>0){
           isStop=false;
           if(--selected == 0) //到了选择的奖项之后
           {
               clearTimer();
               isRunning = true;
               isStop=true;
           }
           else
           {
               clearTimer();
               timer = setInterval(rotate,speed+100);
           }
       }
       drawDisc(isRunning);
       index++;
       step++;
   }
   //开始抽奖的初始化
   function init(){
        baseLap=3;
       selected=Math.floor(Math.random()*10)+1;   //1-10的随机数
       isRaffle=false;
       index=0;
       step=1;
       speed=300;
       isRunning=true;

   }
    // 绘制圆盘
    function drawDisc(isRunning){
        var deg = Math.PI/300;
        var startAngle = 0;
        var endAngle = 58;
        canvas.width=oWidth;
        canvas.height=oHeight;
        var context=canvas.getContext('2d');
        //绘制间隔色圆盘
        for(var i=0;i<10;i++){
            if(isRunning&&index==i){//如果正在运行改变颜色
                context.fillStyle='red';
            }else{
                context.fillStyle=fillColor[i%2];
            }
            context.beginPath();//beginPath()表示开始一段新的路径。没有beginPath()的路径会接着上一段路径开始。closePath表示的是闭合路径，并不是路径的结束点。
            context.moveTo(c_x,c_y); //从该起点开始绘制成圆弧
            //这里不是很懂
            context.arc(c_x,c_y,c_r,deg*startAngle,deg*endAngle,false);
            context.fill();

//            绘制扇形上面的文字
            context.font="12px Microsoft Yahei";
            context.fillStyle="#fff";
            context.textAlign="center";
            context.fillText(fillText[i],200+Math.cos(deg*(startAngle+30))*150,200+Math.sin(deg*(startAngle+30))*150);

            startAngle+=60;
            endAngle+=60;
        }

//        绘制中心圆
        context.beginPath();
        context.arc(c_x,c_y,50,0,360);
        context.lineWidth=10;
        context.strokeStyle='#fff';
        context.fillStyle='rgb(124, 187, 224)';
        context.stroke();
        context.fill();
        //创建渐变对象
        var gradient=context.createLinearGradient(0,0,oWidth,0);
        gradient.addColorStop('0','magenta');
        gradient.addColorStop('0.4','red');
        gradient.addColorStop('0.6','blue');
        //绘制中心文字
        context.font="18px Microsoft Yahei";
        context.fontWeight="bolder";
        context.textAlign="center";
        context.fillStyle=gradient;
        context.fillText('START',c_x,c_y-10);
        context.fillText('立即抽奖',c_x,c_y+20);
    }
    //清空循环函数
    function clearTimer(){
        clearInterval(timer);
        timer=null;
    }
    //获得鼠标点击在表盘区域的位置  拿到canvas  鼠标点击位置
    function getPos(canvas,x,y){
        var cRect=canvas.getBoundingClientRect();
        return {
            x:x-cRect.left*(canvas.width/cRect.width),
            y:y-cRect.top*(canvas.height/cRect.height)
        }
    }
</script>
</body>
</html>